<template>
  <div class="flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="能源品种">
          <el-select v-model="category">
            <el-option :value="1" label="其他"></el-option>
            <el-option :value="2" label="煤炭"></el-option>
            <el-option :value="3" label="电力"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-select v-model="type" style="width:80px;">
            <el-option :value="1" label="按月"></el-option>
            <el-option :value="2" label="按日"></el-option>
          </el-select>
          <el-date-picker
            v-model="date" :type="pickerType"
            :format="pickerFormatter" :value-format="pickerFormatter"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-item bg-white border-radius">
      <div class="info-head">实时能耗曲线</div>
      <div class="info-content">
        <v-chart ref="chart" :option="chartOption" style="width:100%;height:100%;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.flex-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.info-head {
  padding: 20px $gutter $gutter;
  font-size: 16px;
  border-bottom: 1px solid #eeeeee;
}
.info-content {
  flex: 1;
}
</style>

<script>
export default {
  name: 'energy-consumption-trend-analysis',
  data () {
    return {
      category: '',
      type: 1,
      date: this.$dayjs().format('YYYY-MM')
    }
  },
  computed: {
    isCollapsed () {
      return this.$store.state.isCollapsed
    },
    themeColor () {
      return this.$store.state.user.theme
    },
    pickerType () {
      const { type } = this
      return type === 1 ? 'month' : 'date'
    },
    pickerFormatter () {
      const { type } = this
      return type === 1 ? 'yyyy-MM' : 'yyyy-MM-dd'
    },
    xaxisData () {
      const { type, date } = this
      const ret = []
      if (type === 1) {
        // month
        const nextMonth = this.$dayjs(date).add(1, 'month')
        const last = nextMonth.set('date', 0).get('date')
        let i = 0
        while (i < last) {
          ret.push(this.$dayjs(date).add(i, 'day').format('YYYY-MM-DD'))
          i++
        }
        return ret
      } else {
        // date
        let i = 0
        while (i < 24) {
          ret.push(('' + i).padStart(2, '0') + ':00')
          i++
        }
        return ret
      }
    },
    chartOption () {
      return {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '8%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xaxisData
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              color: this.themeColor
            },
            areaStyle: {
              color: this.themeColor,
              opacity: 0.2
            },
            data: this.xaxisData.map(() => Math.round(Math.random() * 99 + 1))
          }
        ],
      }
    },
  },
  watch: {
    isCollapsed () {
      this.$refs.chart.resize()
    }
  },
}
</script>
